<template>
  <div>
    <el-tabs tab-position="left" v-model="ttype" @tab-click="handleTabClick">
      <el-tab-pane :label="callName + '的关注'" name="follow">
        <div class="list-box">
          <div class="list-node" v-for="(item, i) in followList" :key="i" @click=" $router.push('/user/' + item.id)">
            <!-- {{ item }} -->
            <div class="user-title-box">
              <div class="title-left">
                <el-avatar :src="item.avatar"></el-avatar>
                <div class="user-info">
                  <h3 class="username">{{ item.name }}</h3>
                  <span>{{ item.jianjie }}</span>
                </div>
              </div>

              <div class="title-right">
                <el-button
                  size="mini"
                  plain
                  type="danger"
                  v-if="!item.isGuanzhu"
                  @click.stop="changeGuanzhu(item.id, i)"
                  ><a-icon type="heart" theme="filled" /> 关注</el-button
                >
                <el-button
                  size="mini"
                  plain
                  type="info"
                  v-else
                  @click.stop="changeGuanzhu(item.id, i)"
                  ><a-icon type="check" /> 已关注</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="callName + '的粉丝'" name="fans">
        <div class="list-box">
          <div class="list-node" v-for="(item, i) in fansList" :key="i"  @click=" $router.push('/user/' + item.id)">
            <div class="user-title-box">
              <div class="title-left">
                <el-avatar :src="item.avatar"></el-avatar>
                <div class="user-info">
                  <h3 class="username">{{ item.name }}</h3>
                  <span>{{ item.jianjie }}</span>
                </div>
              </div>

              <div class="title-right">
                <el-button
                  size="mini"
                  plain
                  type="info"
                  v-if="item.isGuanzhu && !isMe"
                  @click.stop="changeGuanzhu(item.id, i)"
                  ><a-icon type="check" /> 已关注</el-button
                >
                <el-button
                  size="mini"
                  plain
                  type="info"
                  v-else-if="item.isGuanzhu && isMe"
                  @click.stop="changeGuanzhu(item.id, i)"
                  ><a-icon type="swap" /> 互相关注</el-button
                >
                <el-button
                  size="mini"
                  plain
                  type="danger"
                  v-else
                  @click.stop="changeGuanzhu(item.id, i)"
                  ><a-icon type="heart" theme="filled" /> 关注</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    isMe: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    // console.log(this.$route);
    this.ttype = this.$route.params.type;
  },
  mounted() {
    this.ttype = this.$route.params.type;
  },
  data() {
    return {
      ttype: "follow",
      followList: [
        {
          id: 2,
          name: "王楷",
          jianjie: "爱美食网站作者",
          avatar:
            "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
          isGuanzhu: true,
        },
        {
          id: 3,
          name: "刘岩",
          jianjie: "鸡~",
          avatar:
            "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
          isGuanzhu: true,
        },
        {
          id: 4,
          name: "罗翔泽",
          jianjie: "这个用户没有描述",
          avatar:
            "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
          isGuanzhu: true,
        },
        {
          id: 5,
          name: "张从旺",
          jianjie: "这个用户没有描述",
          avatar:
            "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
          isGuanzhu: true,
        },
      ],
      fansList: [
        {
          id: 6,
          name: "韩飞",
          jianjie: "xx xxxx xx xxx xxxx",
          avatar:
            "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
          isGuanzhu: true,
        },
        {
          id: 7,
          name: "陈翔六点半",
          jianjie: "hahahaahahahaahahaahahahahah",
          avatar:
            "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
          isGuanzhu: false,
        },
        {
          id: 8,
          name: "周杰伦",
          jianjie: "哎呦，不错哦~",
          avatar:
            "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
          isGuanzhu: false,
        },
        {
          id: 9,
          name: "佟贺",
          jianjie: "我是一个大傻瓜",
          avatar:
            "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
          isGuanzhu: true,
        },
      ],
    };
  },
  computed: {
    callName() {
      return this.isMe ? "我" : "TA";
    },
  },
  methods: {
    handleTabClick(tab) {},
    changeGuanzhu(uid, i) {
      if (this.ttype == "follow") {
        this.followList[i].isGuanzhu = !this.followList[i].isGuanzhu;
      } else {
        this.fansList[i].isGuanzhu = !this.fansList[i].isGuanzhu;
      }
      // console.log(this.ttype);
    },
  },
};
</script>

<style lang="less" scoped>
.list-box {
  padding: 10px;
  .list-node {
    // height: 60px;
    // padding: 5px;
    margin: 10px auto;
    // border: 1px solid #f05365;
    border: 1px solid #fff;
    box-shadow: 0px 0px 8px 2px #eee;
    transition: 0.5s all;
    &:hover {
      cursor: pointer;
      box-shadow: 0px 0px 8px 2px #aaa;
    }

    .user-title-box {
      // position: absolute;
      // bottom: 0;
      // background-image: linear-gradient(
      //   to top,
      //   rgba(150, 150, 150, 1),
      //   rgba(255, 255, 255, 0)
      // );
      border: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .el-avatar {
          margin-left: 10px;
          width: 60px;
          height: 60px;
          border: 2px solid #eee;
        }
        .user-info {
          margin-left: 12px;
          h3 {
            color: #666;
          }
          span {
            font-size: 8px;
            color: #666;
          }
        }
      }
      .title-right {
        display: flex;
        align-items: center;
        .el-button {
          margin: 23px;
        }
      }
    }
  }
}
</style>

